<template>
    <div class="self-box">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>个人信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="infoForm" :inline="true" class="info-form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="infoForm.staffName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="infoForm.staffSex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="infoForm.staffAge" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="infoForm.staffTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="infoForm.staffAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="薪资" :label-width="formLabelWidth">
                <el-input disabled autocomplete="off" v-model="infoForm.staffSal"></el-input>
            </el-form-item>
            <el-form-item label="入职" :label-width="formLabelWidth">
                <el-date-picker disabled autocomplete="off" v-model="infoForm.shireDate" type="datetime" style="width:175%"></el-date-picker>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-date-picker  type="datetime" align="right"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    autocomplete="off"
                    v-model="infoForm.staffDate"
                    style="width:175%"></el-date-picker>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input disabled autocomplete="off" v-model="infoForm.jobName"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-input disabled autocomplete="off" v-model="infoForm.deptName"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-input disabled autocomplete="off" v-model="infoForm.staffState"></el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input disabled autocomplete="off" v-model="infoForm.snickName"></el-input>
            </el-form-item>
        </el-form>
        <div style="display: none">
          <input type="file" ref="upload"/>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetInfo()" type="warning">重 置</el-button>
            <el-button type="primary" @click="updateStaffInfo()" style="margin-left:100px">确 定 修 改</el-button>
            <el-button type="primary" @click="uploadResume()" style="margin-left:100px">上 传 个 人 简 历</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            infoForm:{},
            formLabelWidth:'120px',
            JobData:[],
            DeptData:[],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
        }
    },
    created(){
        this.getSelfInfo();
    },
  mounted() {
    this.$refs.upload.addEventListener('change',(e) => {

      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);

      this.$http.post('/employInfo/uploadResume', formData,
        {headers: {'Content-Type': 'multipart/form-data'}}).then((res)=>{
        if(res.data){
          this.getSelfInfo();
          this.$message.success("上传成功!!!");
        }else{
          this.$message.error("上传失败!!!");
        }
      }).catch((err)=>{
        this.$message.error(err.msg);
      }).finally(() => {
        this.$refs.upload.value = '';
      });

    },false);
  },
  methods:{
        //获取个人信息
        getSelfInfo(){
            this.$http.get("/employInfo/getSelfInfo").then((res)=>{
                // console.log(res);
                if(res.code === 200){
                    this.infoForm = res.data;
                }
            })
        },
        //重置
        resetInfo(){
            this.getSelfInfo();
            this.$message.success("重置个人信息成功!!!");
        },
        //修改
        updateStaffInfo(){
            this.$http.post('/employInfo/updateStaffInfo',this.infoForm).then((res)=>{
                // console.log(res.code);
                if(res.code === 200 && res.data){
                    this.getSelfInfo();
                    this.$message.success("修改成功!!!");
                }else{
                    this.$message.error("修改失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("修改失败!!!");
            });
        },
      // 上传简历
      uploadResume() {
        this.$refs.upload.click();
      }
    }
}
</script>

<style scoped>
.self-box .info-form{
    margin: 60px 0 0 10%;
}
.self-box .info-form .el-form-item{
    width:40%;
}
.self-box .info-form .el-form-item .el-input{
    width: 200%;
}
.dialog-footer{
    margin-top: 20px;
    margin-left: 30%;
}

</style>
